<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { formatDate } from '@/utils/common'
import { flyTimeTotalServer, airspaceResourcesServer, flyCountTrendServer } from '@/api'
const timebar = ref('月')
const timeList = ref(['月', '周'])
const airspaceAppData = ref({})
const optionData01 = {
  tooltip: {
    trigger: 'axis',
    borderColor: '#0F2638',
    backgroundColor: '#0F2638DB',
    textStyle: {
      color: '#fff',
      fontSize: 14,
      marginLeft: '-20px'
    },
    formatter: function (params) {
      return `<div>${params[0].name} ${params[0].data} h</div>`
    }
  },
  grid: {
    left: '2%',
    right: '10%',
    bottom: '2%',
    top: '34%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月'],
      axisLabel: {
        textStyle: {
          color: 'rgba(255,255,255,.7)'
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.2)'
        }
      },
      axisTick: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: 'h',
      splitNumber: 2,
      nameTextStyle: {
        padding: [0, 30, 0, 0],
        color: '#85B9CB'
      },
      axisLabel: {
        textStyle: {
          color: '#85B9CB'
        },
        formatter: '{value}'
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, 0.2)'
        }
      }, //设置网格
      axisTick: {
        show: false
      }
    }
  ],
  series: [
    {
      type: 'line',
      smooth: true,
      showSymbol: false,
      lineStyle: {
        color: '#3CE4E8'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(60, 228, 232, 0.5)'
          },
          {
            offset: 1,
            color: 'rgba(60, 228, 232, 0)'
          }
        ])
      },
      data: ['', '', '', '', '']
    }
  ]
}
const option01 = ref(optionData01)

const timebar02 = ref('月')
const airspaceAppData02 = ref({})
const optionData02 = {
  tooltip: {
    trigger: 'axis',
    borderColor: '#0F2638',
    backgroundColor: '#0F2638DB',
    textStyle: {
      color: '#fff',
      fontSize: 14,
      marginLeft: '-20px'
    },
    formatter: function (params) {
      return `<div>${params[0].name} ${params[0].data} 架次</div>`
    }
  },
  grid: {
    left: '2%',
    right: '10%',
    bottom: '2%',
    top: '34%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月'],
      axisLabel: {
        textStyle: {
          color: 'rgba(255,255,255,.7)'
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.2)'
        }
      },
      axisTick: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '次',
      splitNumber: 2,
      nameTextStyle: {
        padding: [0, 30, 0, 0],
        color: '#85B9CB'
      },
      axisLabel: {
        textStyle: {
          color: '#85B9CB'
        },
        formatter: '{value}'
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, 0.2)'
        }
      }, //设置网格
      axisTick: {
        show: false
      }
    }
  ],
  series: [
    {
      type: 'line',
      smooth: false,
      showSymbol: true,
      lineStyle: {
        color: '#FFF37C'
      },
      itemStyle: {
        // 设置symbol的颜色
        normal: {
          color: '#FFF37C'
        }
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(255, 243, 124, 0.5)'
          },
          {
            offset: 1,
            color: 'rgba(255, 243, 124, 0)'
          }
        ])
      },
      data: ['', '', '', '', '']
    }
  ]
}
const option02 = ref(optionData02)

//飞行时长趋势
const getflyTimeTotal = async () => {
  const res = await flyTimeTotalServer()
  airspaceAppData.value = res.data
  const monthArr = res.data?.month.map((i) => formatDate(i.month))
  const timeArr = res.data?.month.map((i) => i.time)
  option01.value.xAxis[0].data = monthArr
  option01.value.series[0].data = timeArr
}

//飞行架次趋势
const flyCountTrend = async () => {
  const res = await flyCountTrendServer()
  airspaceAppData02.value = res.data
  const monthArr = res.data?.month.map((i) => formatDate(i.month))
  const timeArr = res.data?.month.map((i) => i.flyCount)
  option02.value.xAxis[0].data = monthArr
  option02.value.series[0].data = timeArr
}

//飞行服务总时长
const totalTime = ref(0)
const getAirspaceResources = async () => {
  const res = await airspaceResourcesServer()
  const { flyHour } = res.data
  totalTime.value = flyHour
}

// 年月切换
const changeTimebar = (item) => {
  timebar.value = item
  option01.value.xAxis[0].data = []
  option01.value.series[0].data = []
  if (item === '月') {
    const monthArr = airspaceAppData.value.month.map((i) => formatDate(i.month))
    const timeArr = airspaceAppData.value.month.map((i) => i.time)
    option01.value.xAxis[0].data = monthArr
    option01.value.series[0].data = timeArr
  } else if (item === '周') {
    const monthArr = airspaceAppData.value.week.map((i) => '周' + i.day)
    const timeArr = airspaceAppData.value.week.map((i) => i.time)
    option01.value.xAxis[0].data = monthArr
    option01.value.series[0].data = timeArr
  }
}

// 年月切换
const changeTimebar02 = (item) => {
  timebar02.value = item
  option02.value.xAxis[0].data = []
  option02.value.series[0].data = []
  if (item === '月') {
    const monthArr = airspaceAppData02.value.month.map((i) => formatDate(i.month))
    const timeArr = airspaceAppData02.value.month.map((i) => i.flyCount)
    option02.value.xAxis[0].data = monthArr
    option02.value.series[0].data = timeArr
  } else if (item === '周') {
    const monthArr = airspaceAppData02.value.week.map((i) => '周' + i.day)
    const timeArr = airspaceAppData02.value.week.map((i) => i.count)

    option02.value.xAxis[0].data = monthArr
    option02.value.series[0].data = timeArr
  }
}

onMounted(() => {
  getflyTimeTotal()
  getAirspaceResources()
  flyCountTrend()
})
</script>
<template>
  <div class="card">
    <CommonTitle title="飞行服务时长" />
    <div class="conbox">
      <div class="titlebox">
        <div class="trend">
          <img src="@img/overview/arrow_left.png" alt="" />
          <span>飞行时长趋势</span>
        </div>
        <div class="timebar">
          <p
            v-for="(item, index) in timeList"
            :key="index"
            :class="{ active: timebar == item }"
            @click="changeTimebar(item)"
          >
            {{ item }}
          </p>
        </div>
      </div>
      <div class="chart">
        <Charts :option="option01" container="16" />
      </div>
      <div class="titlebox">
        <div class="trend">
          <img src="@img/overview/arrow_left.png" alt="" />
          <span>飞行架次趋势</span>
        </div>
        <div class="timebar">
          <p
            v-for="(item, index) in timeList"
            :key="index"
            :class="{ active: timebar02 == item }"
            @click="changeTimebar02(item)"
          >
            {{ item }}
          </p>
        </div>
      </div>
      <div class="chart02">
        <Charts :option="option02" container="17" />
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.card {
  .conbox {
    padding: 10px;
    .titlebox {
      display: flex;
      align-items: center;

      .timebar {
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 10px;

        p {
          width: 60px;
          height: 37px;
          text-align: center;
          line-height: 37px;
          margin-left: 10px;
          background: url('@img/overview/timebar.png');
          background-size: 100% 100%;
          color: #a7b1bb;
          cursor: pointer;

          &.active {
            background: url('@img/overview/timebar_active.png');
            background-size: 100% 100%;
            color: #fff;
          }
        }
      }

      .trend {
        width: 255px;
        height: 24px;
        margin-top: 10px;
        background: linear-gradient(
          270deg,
          rgba(86, 92, 96, 0.09) 0%,
          rgba(59, 187, 203, 0.22) 50%,
          rgba(47, 221, 254, 0.66) 100%
        );
        border-radius: 6px;
        display: flex;
        align-items: center;
        padding-left: 10px;

        img {
          width: 7px;
          height: 7px;
        }

        span {
          font-size: 16px;
          margin-left: 10px;
        }
      }
    }

    .chart {
      width: 100%;
      height: 140px;
      margin-top: -5px;
    }

    .chart02 {
      width: 100%;
      height: 140px;
      margin-top: -5px;
    }

    .lenged {
      display: flex;
      align-items: center;
      padding: 0 50px;
      justify-content: space-between;
      margin-top: 10px;

      p {
        display: flex;
        align-items: center;

        span {
          width: 10px;
          height: 2px;
          background-color: #3ce4e8;
          margin-right: 2px;
        }

        &:last-child {
          span {
            background-color: #fff5a0;
          }
        }
      }
    }
  }
}
</style>
